<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拖拽3</title>
    <style>

        #div1 {
            padding-top: 20px;
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: aqua;
            border-style: solid;
            float: left;
        }

        #div2 {
            padding-top: 20px;
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: red;
            border-style: solid;
            float: left;
            margin-left: 10px;
        }

        #div3 {
            padding-top: 20px;
            width: 200px;
            height: 200px;
            border-width: 1px;
            border-color: red;
            border-style: solid;
            float: left;
            margin-left: 10px;
        }

        #p1 {
            margin: auto;
            display: block;
            width: 60%;
            text-align: center;
            background-color: aquamarine;
        }

        #p2 {
            margin: auto;
            display: block;
            width: 60%;
            text-align: center;
            background-color: blueviolet;
        }

    </style>
</head>
<body>

<div id="div1">
    <p id="p1" draggable="true">鼠标拖拽我试试</p>
    <p id="p2" draggable="true">试着也把我拖拽</p>
</div>


<div id="div2"></div>
<div id="div3"></div>

<script>

    var tempObj = null;

    document.ondrag = function (event) {

    };

    document.ondragstart = function (event) {
        event.target.style.opactity = 0.5;
        event.target.parentNode.style.borderWidth = "5px";
        tempObj = event.target;
        console.log("ondragstart"+event.target)
    };

    document.ondragend = function (event) {
        console.log(event.target.parentNode)
        event.target.style.opactity = 1.0;
        event.target.parentNode.style.borderWidth = "1px";
        document.getElementById("div1").style.borderWidth = "1px";
        document.getElementById("div2").style.borderWidth = "1px";
        document.getElementById("div3").style.borderWidth = "1px";
    };


    document.ondrop = function (event) {
        event.target.appendChild(tempObj);
        event.target.style.opactity = 1.0;
        event.target.parentNode.style.borderWidth = "1px";
    };

    document.ondragenter = function (event) {
        console.log("ondragenter"+event.target)
    };

    document.ondragover = function (event) {
        event.preventDefault();
        // event.target.style.opactity = 1.0;
        // event.target.parentNode.style.borderWidth = "1px";
    }

    document.ondragleave = function (event) {
        // event.target.style.opactity = 1.0;
        // event.target.parentNode.style.borderWidth = "1px";
    }


</script>

</body>
</html>
